<section class="container">
    <div class="container" style="margin-top: 10px;">
        <div class="row">
            <div class="col-sm-3 col-md-3">
                <div style="background-color: #f6f7f9; height:620px;" id="navBg">
                <div ng-repeat="item in items" class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading nav-panel-header "
                             ng-class="{'nav-panel-header-active': activeHead(item) }" ng-click="">
                            <h4 class="panel-title">
                                <a href={{item.url}}>
                                    <span class="nav-link">{{item.name}}</span><!--媒体报道--><!--视频-->
                                </a>
                            </h4>
                        </div>
                        <div ng-show="item.showChildren">
                            <div class="panel-body nav-panel-body">
                                <!--<table class="table">-->
                                    <!--<tr ng-repeat="child in item.children">-->
                                        <!--<td ng-class="{'nav-panel-header-active': selectedType == child.type}">-->
                                            <!--<a href={{child.url}}><span class="nav-link">{{child.name}}</span></a>-->
                                        <!--</td>-->
                                    <!--</tr>-->
                                <!--</table>-->
                                <li class="list-group-item" ng-repeat="child in item.children">
                                    <a href={{child.url}}><span class="nav-sub-link" ng-class="{'nav-sub-link-active': selectedType == child.type}">{{child.name}}</span></a>
                                </li>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>

            <div class="col-sm-9 col-md-9">
                <div>
                    <div class="yearbox">
                        <ul class="linian-xian">
                            <!--<li ng-class="selectedYear == 2017 ? 'current' :''"><p><a href="" ng-click="selectYear(2017)">2017</a></p></li>-->
                            <li ng-class="selectedYear == 2016 ? 'current' :''"><p><a href=""
                                                                                      ng-click="selectYear(2016)">2016</a>
                            </p></li>
                            <li ng-class="selectedYear == 2015 ? 'current' :''" ng-click="selectYear(2015)"><p><a
                                    href="">2015</a></p></li>
                            <li ng-class="selectedYear == 2014 ? 'current' :''"><p><a href=""
                                                                                      ng-click="selectYear(2014)">2014</a>
                            </p></li>
                            <li ng-class="selectedYear == 2013 ? 'current' :''"><p><a href=""
                                                                                      ng-click="selectYear(2013)">2013</a>
                            </p></li>
                            <li ng-class="selectedYear == 2012 ? 'current' :''"><p><a href=""
                                                                                      ng-click="selectYear(2012)">2012</a>
                            </p></li>
                            <li ng-class="selectedYear == 2011 ? 'current' :''"><p><a href=""
                                                                                      ng-click="selectYear(2011)">2011</a>
                            </p></li>
                        </ul>
                    </div>

                </div>

                <div class="clearfix" style="clear: both">
                    <div ng-repeat="article in currentPageArticles">
                        <a href="/#/mediaDetail/{{article.id}}">
                            <div style="height: 80px; border-bottom: 1px lightgrey dotted;">

                                <div style="width: 100px; height: 60px; float:left; line-height: 60px">
                                    <img ng-src="{{article.cover_url}}" height="60px " width="100px">

                                </div>

                                <div style="width: 700px; float:left; margin-left: 5px">
                                    <div class="" style="color: black">
                                        {{article.title}}
                                    </div>
                                    <div class="" style="color: gray">
                                        {{article.description}}
                                    </div>

                                </div>
                                <div class="media-list-time-6" style="text-align: right; clear: both; color:gray;">
                                    {{article.update_at}}
                                </div>

                            </div>
                        </a>

                    </div>
                </div>

                <footer class="table-footer">
                    <div class="row">
                        <div class="col-md-6 page-num-info">
                    <span>
                        每页显示
                        <select data-ng-model="numPerPage"
                                data-ng-options="num for num in numPerPageOpt"
                                data-ng-change="onNumPerPageChange()">
                        </select> 
                        条
                    </span>
                        </div>
                        <div class="col-md-6 text-right pagination-container">
                            <ul uib-pagination class="pagination-sm"
                                ng-model="currentPage"
                                total-items="articles.length"
                                max-size="4"
                                ng-change="select(currentPage)"
                                items-per-page="numPerPage"
                                rotate="false"
                                previous-text="上一页"
                                next-text="下一页"
                                first-text="首页"
                                last-text="末页"
                                previous-text="&lsaquo;" next-text="&rsaquo;"
                                boundary-links="true"></ul>

                        </div>
                    </div>
                </footer>

            </div>
        </div>
    </div>
</section>

